The AJAX toolbox provided by jQuery is well-stocked.
We've covered several of the available options, but we've just scratched
the surface. While there are too many variants to cover here, we will
give an overview of some of the more prominent ways to customize AJAX
communications.
The low-level AJAX method
We have seen several
methods that all initiate AJAX transactions. Internally, jQuery maps
each of these methods onto variants of the $.ajax()
global function. Rather than presuming one particular type of AJAX
activity, this function takes a map of options that can be used to
customize its behavior.
Our first example loaded an HTML snippet using $('#dictionary').load('a.html'). This action could instead be accomplished with $.ajax() as follows:
$.ajax({
url: 'a.html',
type: 'GET',
dataType: 'html',
success: function(data) {
$('#dictionary').html(data);
}
});
We need to explicitly specify
the request method, the data type that will be returned, and what to do
with the resulting data. Clearly, this is less efficient use of
programmer effort; however, with this extra work comes a great deal of
flexibility. A few of the special capabilities that come with using a
low-level $.ajax() call include:
Preventing the browser from caching responses from the server. This can be useful if the server produces its data dynamically.
Registering separate callback functions for when the request completes successfully, with an error, or in all cases.
Suppressing the global handlers (such as ones registered with $.ajaxStart()) that are normally triggered by all AJAX interactions.
Providing a user name and password for authentication with the remote host.
For details on using these and other options, consult jQuery Reference Guide or see the API reference online (http://docs.jquery.com/Ajax/jQuery.ajax).
Modifying default options
The $.ajaxSetup()
function allows us to specify default values for each of the options
used when AJAX methods are called. It takes a map of options identical
to the ones available to $.ajax() itself, and causes these values to be used on all subsequent AJAX requests unless overridden.
$.ajaxSetup({
url: 'a.html',
type: 'POST',
dataType: 'html'
});
$.ajax({
type: 'GET',
success: function(data) {
$('#dictionary').html(data);
}
});
This sequence of operations behaves the same as our preceding $.ajax() example. Note that the URL of the request is specified as a default value by the $.ajaxSetup() call, so it does not have to be provided when $.ajax() is invoked. In contrast, the type parameter is given a default value of POST, but this can still be overridden in the $.ajax() call to GET.
Loading parts of an HTML page
The first and simplest
AJAX technique we discussed was fetching an HTML snippet and placing it
on a page. Sometimes, though, the server already provides the HTML we
need, but it is surrounded by an HTML page we do not want. When it is
inconvenient to make the server provide the data in the format we
desire, jQuery can help us on the client end.
Consider a case like our
first example, but in which the document containing the dictionary
definitions is a complete HTML page like this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>The Devil's Dictionary: H</title>
<link rel="stylesheet" href="dictionary.css"
type="text/css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<h2>The Devil's Dictionary: H</h2>
<div class="author">by Ambrose Bierce</div>
</div>
<div id="dictionary">
<div class="entry">
<h3 class="term">HABEAS CORPUS</h3>
<div class="part">n.</div>
<div class="definition">
A writ by which a man may be taken out of jail
when confined for the wrong crime.
</div>
</div>
<div class="entry">
<h3 class="term">HABIT</h3>
<div class="part">n.</div>
<div class="definition">
A shackle for the free.
</div>
</div>
</div>
</div>
</body>
</html>
We can load the whole document into our page using the code we wrote earlier:
$(document).ready(function() {
$('#letter-h a').click(function() {
$('#dictionary').load('h.html');
return false;
});
});
This produces a strange effect, though, due to the pieces of the HTML page we don't want to include:
To remove these extraneous bits, we can use a new feature of the .load()
method. When specifying the URL of the document to load, we can also
provide a jQuery selector expression. If present, this expression is
used to locate a portion of the loaded document. Only the matched part
of the document is inserted into the page. In this case, we can use this
technique to pull only the dictionary entries from the document and
insert them:
$(document).ready(function() {
AJAXHTML snippet, loading$('#letter-h a').click(function() {
$('#dictionary').load('h.html .entry');
Now the irrelevant portions of the document are excluded from the page:
